import React from 'react'
import cn from 'classnames'
import Loading from '../../ucdpComponents/Loading'
import Icon from '../../ucdpComponents/Icon'
import i from '../index.module.css'
import s from './style.module.css'

export default function Levels ({levelLoading, levels, star}) {
  return (
    <div className={cn(s.h236, levels.level === 2 ? s.security : levels.level === 3 ? s.warns : s.errors, i.pr)}>
      <Loading show={levelLoading} />
      <div className={cn(i.pa, s.fans)}>
        {levels.level === 2 ? (
          <svg width="32px" height="32px" viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink">
              <defs>
                  <radialGradient cx="50%" cy="50%" fx="50%" fy="50%" r="79.6017662%" id="radialGradient-1">
                      <stop stop-color="#20C850" offset="0%"></stop>
                      <stop stop-color="#77FB96" stop-opacity="0.501047328" offset="100%"></stop>
                  </radialGradient>
              </defs>
              <g id="页面设计" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                  <g id="报表中心" transform="translate(-400.000000, -165.000000)">
                      <g id="编组-55" transform="translate(160.000000, 147.000000)">
                          <g id="编组-13">
                              <g id="编组-10" transform="translate(240.000000, 18.000000)">
                                  <g id="编组-8">
                                      <path d="M21.451248,24.0938388 C22.748138,22.3078417 22.229382,19.9328422 20.2250676,18.3238667 C19.3879541,17.6515188 17.4279072,16.9442236 17.6585409,16.383245 C18.7187458,14.7450809 20.7945371,16.0414003 22.0860773,17.2102835 C23.7697102,18.7335836 25.2170964,18.352286 25.8224579,16.1862002 C26.4698724,13.8701054 25.2769748,10.8837507 23.3759292,10.0612619 C21.4200481,9.21490346 19.3123552,10.1649824 17.7000897,12.6392185 C17.2902593,13.2699376 17.1065241,14.468449 16.071665,13.8691603 C15.2999991,13.4230676 15.5010773,12.4117983 15.9593849,11.6476866 C16.3261317,11.0374522 16.6939968,10.4154589 17.1469984,9.86968994 C18.7236571,7.97155426 18.2219371,6.57859169 15.7570788,6.10361818 C13.3107913,5.63290866 10.6796284,6.80678118 10.0636989,8.7955157 C9.27690434,11.3361514 10.6388033,12.9697438 12.6336678,14.2455345 C13.277925,14.6571636 14.4859293,14.8728248 13.8450924,15.9140081 C13.4147837,16.6121818 12.4203771,16.3719036 11.605211,16.0080137 C10.922387,15.7039955 10.3820782,15.2791349 9.83990588,14.7871713 C8.12899775,13.2327925 6.78409105,13.6379596 6.17046366,15.8525538 C5.52543904,18.1782976 6.78376217,21.1733781 8.7184633,21.9174007 C10.8992995,22.7565718 13.5123519,21.851111 14.7941352,19.0015557 C15.1010914,18.5573532 15.1155403,17.6348364 15.7496022,17.8717298 C16.3556215,18.0987324 16.4048222,18.7900705 16.3155856,19.2911554 C16.1053425,20.4661489 15.559399,21.4257888 14.5638523,22.2343208 C13.3263803,23.2390843 13.4125473,24.4102753 14.789202,25.3650578 C16.5851151,26.6097697 20.1105071,25.9396197 21.451248,24.0938388 L21.451248,24.0938388 Z M15.2928987,16.707079 C14.902341,16.3165264 14.9023933,15.6834049 15.2928987,15.2929046 C15.6834041,14.9023782 16.3165077,14.902352 16.7070915,15.2929046 C17.0976492,15.6834834 17.0976231,16.3165787 16.7070915,16.7071052 C16.3165861,17.0976055 15.6834825,17.0976578 15.2928987,16.7071052 L15.2928987,16.707079 Z" id="形状-copy-2" fill="url(#radialGradient-1)" fill-rule="nonzero" transform="translate(16.000000, 16.000000) rotate(-105.000000) translate(-16.000000, -16.000000) "></path>
                                      <circle id="椭圆形" stroke="#E6EAEF" cx="16" cy="16" r="15.5"></circle>
                                  </g>
                              </g>
                          </g>
                      </g>
                  </g>
              </g>
          </svg>
        ) : levels.level === 3 ? (
          <svg width="32px" height="32px" viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink">
              <defs>
                  <radialGradient cx="50%" cy="50%" fx="50%" fy="50%" r="79.6017662%" id="radialGradient-1">
                      <stop stop-color="#F67E23" offset="0%"></stop>
                      <stop stop-color="#F67E23" stop-opacity="0" offset="100%"></stop>
                  </radialGradient>
              </defs>
              <g id="页面设计" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                  <g id="系统监控安全状态" transform="translate(-612.000000, -94.000000)">
                      <g id="编组-55备份-2" transform="translate(372.000000, 76.000000)">
                          <g id="编组-13">
                              <g id="编组-10" transform="translate(240.000000, 18.000000)">
                                  <g id="编组-8">
                                      <path d="M21.451248,24.0938388 C22.748138,22.3078417 22.229382,19.9328422 20.2250676,18.3238667 C19.3879541,17.6515188 17.4279072,16.9442236 17.6585409,16.383245 C18.7187458,14.7450809 20.7945371,16.0414003 22.0860773,17.2102835 C23.7697102,18.7335836 25.2170964,18.352286 25.8224579,16.1862002 C26.4698724,13.8701054 25.2769748,10.8837507 23.3759292,10.0612619 C21.4200481,9.21490346 19.3123552,10.1649824 17.7000897,12.6392185 C17.2902593,13.2699376 17.1065241,14.468449 16.071665,13.8691603 C15.2999991,13.4230676 15.5010773,12.4117983 15.9593849,11.6476866 C16.3261317,11.0374522 16.6939968,10.4154589 17.1469984,9.86968994 C18.7236571,7.97155426 18.2219371,6.57859169 15.7570788,6.10361818 C13.3107913,5.63290866 10.6796284,6.80678118 10.0636989,8.7955157 C9.27690434,11.3361514 10.6388033,12.9697438 12.6336678,14.2455345 C13.277925,14.6571636 14.4859293,14.8728248 13.8450924,15.9140081 C13.4147837,16.6121818 12.4203771,16.3719036 11.605211,16.0080137 C10.922387,15.7039955 10.3820782,15.2791349 9.83990588,14.7871713 C8.12899775,13.2327925 6.78409105,13.6379596 6.17046366,15.8525538 C5.52543904,18.1782976 6.78376217,21.1733781 8.7184633,21.9174007 C10.8992995,22.7565718 13.5123519,21.851111 14.7941352,19.0015557 C15.1010914,18.5573532 15.1155403,17.6348364 15.7496022,17.8717298 C16.3556215,18.0987324 16.4048222,18.7900705 16.3155856,19.2911554 C16.1053425,20.4661489 15.559399,21.4257888 14.5638523,22.2343208 C13.3263803,23.2390843 13.4125473,24.4102753 14.789202,25.3650578 C16.5851151,26.6097697 20.1105071,25.9396197 21.451248,24.0938388 L21.451248,24.0938388 Z M15.2928987,16.707079 C14.902341,16.3165264 14.9023933,15.6834049 15.2928987,15.2929046 C15.6834041,14.9023782 16.3165077,14.902352 16.7070915,15.2929046 C17.0976492,15.6834834 17.0976231,16.3165787 16.7070915,16.7071052 C16.3165861,17.0976055 15.6834825,17.0976578 15.2928987,16.7071052 L15.2928987,16.707079 Z" id="形状-copy-2" fill="url(#radialGradient-1)" fill-rule="nonzero" transform="translate(16.000000, 16.000000) rotate(-105.000000) translate(-16.000000, -16.000000) "></path>
                                      <circle id="椭圆形" stroke="#E6EAEF" cx="16" cy="16" r="15.5"></circle>
                                  </g>
                              </g>
                          </g>
                      </g>
                  </g>
              </g>
          </svg>
        ) : (
          <svg width="32px" height="32px" viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink">
              <defs>
                  <radialGradient cx="50%" cy="50%" fx="50%" fy="50%" r="79.6017662%" id="radialGradient-1">
                      <stop stop-color="#FF0000" offset="0%"></stop>
                      <stop stop-color="#FF0000" stop-opacity="0" offset="100%"></stop>
                  </radialGradient>
              </defs>
              <g id="页面设计" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                  <g id="系统监控安全状态" transform="translate(-940.000000, -94.000000)">
                      <g id="编组-55备份" transform="translate(700.000000, 76.000000)">
                          <g id="编组-13">
                              <g id="编组-10" transform="translate(240.000000, 18.000000)">
                                  <g id="编组-8">
                                      <path d="M21.451248,24.0938388 C22.748138,22.3078417 22.229382,19.9328422 20.2250676,18.3238667 C19.3879541,17.6515188 17.4279072,16.9442236 17.6585409,16.383245 C18.7187458,14.7450809 20.7945371,16.0414003 22.0860773,17.2102835 C23.7697102,18.7335836 25.2170964,18.352286 25.8224579,16.1862002 C26.4698724,13.8701054 25.2769748,10.8837507 23.3759292,10.0612619 C21.4200481,9.21490346 19.3123552,10.1649824 17.7000897,12.6392185 C17.2902593,13.2699376 17.1065241,14.468449 16.071665,13.8691603 C15.2999991,13.4230676 15.5010773,12.4117983 15.9593849,11.6476866 C16.3261317,11.0374522 16.6939968,10.4154589 17.1469984,9.86968994 C18.7236571,7.97155426 18.2219371,6.57859169 15.7570788,6.10361818 C13.3107913,5.63290866 10.6796284,6.80678118 10.0636989,8.7955157 C9.27690434,11.3361514 10.6388033,12.9697438 12.6336678,14.2455345 C13.277925,14.6571636 14.4859293,14.8728248 13.8450924,15.9140081 C13.4147837,16.6121818 12.4203771,16.3719036 11.605211,16.0080137 C10.922387,15.7039955 10.3820782,15.2791349 9.83990588,14.7871713 C8.12899775,13.2327925 6.78409105,13.6379596 6.17046366,15.8525538 C5.52543904,18.1782976 6.78376217,21.1733781 8.7184633,21.9174007 C10.8992995,22.7565718 13.5123519,21.851111 14.7941352,19.0015557 C15.1010914,18.5573532 15.1155403,17.6348364 15.7496022,17.8717298 C16.3556215,18.0987324 16.4048222,18.7900705 16.3155856,19.2911554 C16.1053425,20.4661489 15.559399,21.4257888 14.5638523,22.2343208 C13.3263803,23.2390843 13.4125473,24.4102753 14.789202,25.3650578 C16.5851151,26.6097697 20.1105071,25.9396197 21.451248,24.0938388 L21.451248,24.0938388 Z M15.2928987,16.707079 C14.902341,16.3165264 14.9023933,15.6834049 15.2928987,15.2929046 C15.6834041,14.9023782 16.3165077,14.902352 16.7070915,15.2929046 C17.0976492,15.6834834 17.0976231,16.3165787 16.7070915,16.7071052 C16.3165861,17.0976055 15.6834825,17.0976578 15.2928987,16.7071052 L15.2928987,16.707079 Z" id="形状-copy-2" fill="url(#radialGradient-1)" fill-rule="nonzero" transform="translate(16.000000, 16.000000) rotate(-105.000000) translate(-16.000000, -16.000000) "></path>
                                      <circle id="椭圆形" stroke="#E6EAEF" cx="16" cy="16" r="15.5"></circle>
                                  </g>
                              </g>
                          </g>
                      </g>
                  </g>
              </g>
          </svg>
        )}
      </div>
      <div className={cn(i.pa, s.dec)}>
        {levels.level === 2 ? (
          <p className={s.mainCor}>系统安全</p>
        ) : levels.level === 3 ? (
          <p className={s.warnCor}>系统警告</p>
        ) : <p className={s.errCor}>系统危险</p>}
        <p className={cn(i.mt20, i.primaryColor)}>威胁状况评分</p>
        <div className={cn(i.mt10)}>
          <span className={cn(s.db, s.starBox)}>
          {star.map((item, k) => (
            <Icon key={'star' + k} type="star" className={item ? s.star : ''} />
          ))}
          </span>
        </div>
      </div>
    </div>
  )
}